<template lang="html">
  <div class="chart-div" ref="chart" :style="{top:position.top+'px',left:position.left+'px',width:position.width+'px',height:position.height+'px'}">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
var echarts = require('echarts')
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters([
      'position',
      'option',
      'chartModify'
    ])
  },
  watch: {
    option: {
      deep: true,
      handler: function(val,oldVal){
      let options = JSON.parse(JSON.stringify(val))
      this.initChart(options)
      }
    },
    chartModify: function(val,oldVal){
      let options = JSON.parse(JSON.stringify(this.option))
      this.initChart(options)
    }

  },
  methods: {
    initChart (val) {
      echarts.dispose(this.$refs.chart)
      var myChart = echarts.init(this.$refs.chart)
      if(this.$refs.chart.style.width&&this.$refs.chart.style.height){
        setTimeout(() => {
            myChart.setOption(val)
            myChart.resize()
        }, 500)
      }
    }
  }
}
</script>

<style scope>
  .chart-div {
    position:relative;
    border-style:solid;
    border-width:1px
  }
  
</style>


